<template>
	<view class="animated fadeIn faster">
		<view class="hd" :style="{paddingTop:+'10px'}">
			<view>
				<view class="px-2 d-flex d-flex-middle">
					<view class="cat d-flex d-flex-middle">
						<text class="iconfont icon-dingweixiao font32"></text>
					</view>
					<view class="search d-flex d-flex-item d-flex-middle">
					    <view class="color999 mr-1 ml-2">
							<text class="iconfont icon-sousuo"></text>
					    </view>
					    <text class="color999 font-size24">鲜活基围虾</text>
					</view>
					<view class="login d-flex d-flex-middle d-flex-center" @click="navigateTo('/pagesApp/login/login')">
					    <text>登录</text>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 90rpx;"></view>
		<view class="floor pt-1">
		  <view class="slider-bg"></view>
		  <view class="px-2 d-flex d-flex-center">
		    <swiper indicator-dots autoplay :interval="5000" :duration="1000" indicator-active-color="#ff992a" indicator-color="#ffffff" class="rounded20 position-relative" style="width:690rpx;height: 280rpx;overflow: hidden;">
		    	<block v-for="(item,idx) in banner" :key="idx">
		    		<swiper-item>
		    			<view class="swiper-item">
		    				<image class="rounded20" :src="item.image" mode="aspectFill" lazy-load style="width:690rpx;height: 280rpx;"></image>
		    			</view>
		    		</swiper-item>
		    	</block>
		    </swiper>
		  </view>
		</view>
		<view class="row d-flex-center">
			<block v-for="(item,index) in category" :key="item.cateId">
				<view class="span-4 d-flex d-flex-column d-flex-center d-flex-middle py-1">
					<image :src="item.cateImg" class="bg-eee rounded" style="width: 80rpx;height: 80rpx;" mode="widthFix"></image>
					<text class="font24 text-666">{{item.cateName}}</text>
				</view>
			</block>
		</view>
		<view class="px-2 mb-3" style="margin-top: 40rpx;" v-if="midLeft[0]">
			<view class="d-flex d-flex-between">
				<view style="width: 345rpx;display: flex;" v-if="midLeft[0]">
					<image :src="midLeft[0].imageUrl" mode="widthFix" style="width: 345rpx;"></image>
				</view>
				<view class="d-flex d-flex-column d-flex-between">
					<view class="rounded20" style="background-color: #fff;height: 256rpx;width: 345rpx;" v-if="midRightUp[0]&&midRightUp[1]">
						<view class="pt-2 pl-2 mb-2">
							<image src="https://006120.oss-cn-hangzhou.aliyuncs.com/mall/tt2.png" mode="widthFix" style="width: 100%;"></image>
						</view>
						<view class="d-flex px-2 d-flex-between"  >
							<view class="position-relative" v-if="midRightUp[0]">
								<image :src="midRightUp[0].imageUrl" class="rounded15" style="width: 140rpx;height: 140rpx;"></image>
							</view>
							<view class="position-relative" v-if="midRightUp[1]">
								<image :src="midRightUp[1].imageUrl" class="rounded15" style="width: 140rpx;height: 140rpx;"></image>
							</view>
						</view>
					</view>
					<view class="rounded20" style="background-color: #fff;height: 256rpx;width: 345rpx;" v-if="midRightDown[0]&&midRightDown[1]"> 
						<view class="pt-2 pl-2 mb-2">
							<image src="https://006120.oss-cn-hangzhou.aliyuncs.com/mall/tt1.png" mode="widthFix" style="width: 100%;"></image>
						</view>
						<view class="d-flex px-2 d-flex-between">
							<view class="position-relative" v-if="midRightDown[0]">
								<image :src="midRightDown[0].imageUrl" class="rounded15" style="width: 140rpx;height: 140rpx;"></image>
							</view>
							<view class="position-relative" v-if="midRightDown[1]">
								<image :src="midRightDown[1].imageUrl" class="rounded15" style="width: 140rpx;height: 140rpx;"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="w100">
		  <image src="https://006120.oss-cn-hangzhou.aliyuncs.com/mall/index2.png" mode="widthFix" class="w100"></image>
		</view>
		<custom-waterfalls-flow ref="waterfallsFlowRef" imageKey="cover_map" :value="list" :column="column" :columnSpace="1.5" :seat="2" @wapperClick="wapperClick" @imageClick="imageClick" @loaded="loaded">
		    <!-- #ifdef MP-WEIXIN -->
		    <view class="water-item" v-for="(item,index) in list" :key="index" slot="slot{{index}}" v-if="list.length>0">
		    	<view class="water-title px-1" style="font-size:22rpx;color:#999;">{{item.mch_name?item.mch_name:'自营'}}</view>
		        <view class="water-title text-clamp-two px-1">{{item.product_title?item.product_title:''}}</view>
		    	<view class="d-flex d-flex-between d-flex-middle px-1">
		    		<view class="water-price d-flex d-flex-baseline">
		    			<text class="water-price-min">￥</text>
		    			<text class="water-price-num">{{item.price}}</text>
		    			<text class="water-price-min" v-if="item.unit">/{{item.unit?item.unit:''}}</text>
		    		</view>
		    		<text class="water-info">已售{{item.volume?item.volume:0}}</text>
		    	</view>
		    </view>
		    <!-- #endif -->
		    <!-- #ifndef MP-WEIXIN -->
		    <template v-slot:default="item">
		        <view class="water-item">
		    		<view class="water-title px-1" style="font-size:22rpx;color:#999;">{{item.mch_name?item.mch_name:'自营'}}</view>
		            <view class="water-title text-clamp-two px-1">{{item.product_title?item.product_title:''}}</view>
		    		<view class="d-flex d-flex-between d-flex-middle px-1">
		    			<view class="water-price d-flex d-flex-baseline">
		    				<text class="water-price-min">￥</text>
		    				<text class="water-price-num">{{item.price}}</text>
		    				<text class="water-price-min" v-if="item.unit">/{{item.unit?item.unit:''}}</text>
		    			</view>
		    			<text class="water-info">已售{{item.volume?item.volume:0}}</text>
		    		</view>
		        </view>
		    </template>
		    <!-- #endif -->
		</custom-waterfalls-flow>
		<view class="load-more d-flex d-flex-center">
			<text>{{loadingType === 0 ? '上拉显示更多' : (loadingType === 1 ? '正在加载...' : '~ 我是有底线的 ~')}}</text>
		</view>
	</view>
</template>

<script setup>
	import { reactive, ref } from 'vue';
	import { onReady,onReachBottom } from '@dcloudio/uni-app'
	import { goodsApi } from '@/http/goodsApi';
	const column = ref(2)
	let loadingType = ref(1)
	const banner = ref([
		{
			image: 'https://006120.oss-cn-hangzhou.aliyuncs.com/slider/banner01.jpg',
		},
		{
			image: 'https://006120.oss-cn-hangzhou.aliyuncs.com/slider/banner02.jpg',
		},
		{
			image: 'https://006120.oss-cn-hangzhou.aliyuncs.com/slider/banner01.jpg',
		},
		{
			image: 'https://006120.oss-cn-hangzhou.aliyuncs.com/slider/banner02.jpg',
		},
	]);
	const midLeft = ref([{
		imageUrl:'https://img.alicdn.com/imgextra/i3/O1CN01bwHLUB1zsFqDRbfUC_!!6000000006769-1-tps-357-547.gif',
		extra:'',
	}]);
	const midRightUp = ref([{
		imageUrl:'https://img30.360buyimg.com/n6//s240x240_jfs/t1/101601/15/37815/60663/64059a24F065594ed/f7c71839e7f14e87.jpg',
		extra:'',
	},{
		imageUrl:'http://mozhe.oss-cn-hangzhou.aliyuncs.com/mz/20231227/09188.jpg',
		extra:'',
	}])
	const midRightDown = ref([{
		imageUrl:'http://mozhe.oss-cn-hangzhou.aliyuncs.com/mz/20231227/25815.jpg',
		extra:'',
	},{
		imageUrl:'https://mozhezhiyun.oss-cn-hangzhou.aliyuncs.com/2023/09/04/0eccd197c45342e4b105f7eb604acbe0.jpg',
		extra:'',
	}])
	const category = ref([
		{"cateName":"卡券礼包","cateImg":"https://168809.oss-cn-hangzhou.aliyuncs.com/mallcloud/icon/nav1.png","cateUrl":"/pagesActivity/couponPackage/couponPackage","cateId":26},
		{"cateName":"拼团","cateImg":"https://168809.oss-cn-hangzhou.aliyuncs.com/mallcloud/icon/nav3.png","cateUrl":"/pagesActivity/pintuan/pintuan","cateId":77},
		{"cateName":"天天特价","cateImg":"https://168809.oss-cn-hangzhou.aliyuncs.com/mallcloud/icon/nav2.png","cateUrl":"/pagesStore/special/special","cateId":55},
		{"cateName":"砍价","cateImg":"https://168809.oss-cn-hangzhou.aliyuncs.com/mallcloud/icon/nav4.png","cateUrl":"","cateId":78},
		{"cateName":"打卡签到","cateImg":"https://168809.oss-cn-hangzhou.aliyuncs.com/mallcloud/icon/nav5.png","cateUrl":"/pagesActivity/sign/sign","cateId":71},
		{"cateName":"邀请好友","cateImg":"https://168809.oss-cn-hangzhou.aliyuncs.com/mallcloud/icon/nav6.png","cateUrl":"/pagesMain/invite/invite","cateId":73},
		{"cateName":"优惠券","cateImg":"https://168809.oss-cn-hangzhou.aliyuncs.com/mallcloud/icon/nav7.png","cateUrl":"/pagesActivity/counpon/counponlist","cateId":14},
		{"cateName":"积分乐园","cateImg":"https://168809.oss-cn-hangzhou.aliyuncs.com/mallcloud/icon/nav8.png","cateUrl":"","cateId":64},
		{"cateName":"会员","cateImg":"https://168809.oss-cn-hangzhou.aliyuncs.com/mallcloud/icon/nav9.png","cateUrl":"/pagesActivity/member/member","cateId":60},
		{"cateName":"招募令","cateImg":"https://168809.oss-cn-hangzhou.aliyuncs.com/mallcloud/icon/nav10.png","cateUrl":"/pagesMain/encroll/encroll","cateId":62},
	])
	let list = ref([])
	const loaded = ()=>{
		console.log('加载完成')
	}
	const wapperClick = (item)=>{
	    console.log('单项点击事件', item)
	}
	const imageClick = (item)=>{
	    console.log('图片点击事件', item)
	}
	let queryForm = {
		industryType: 0,
		maktId: "12",
		pageNo: 1,
		pageSize: 10,
		showAdr: 1
	};
	onReachBottom(()=>{
		if (loadingType.value == 2 || loadingType.value == 1) {
		    return;
		}
		queryForm.pageNo = queryForm.pageNo+1
		queryGoodsList()
	});
	onReady(() => {
		queryGoodsList()
	});
	async function queryGoodsList() {
		loadingType.value = 1
		try {
	      const result = await goodsApi.queryGoodsList(queryForm);
		  if(result.data){
			  list.value = result.data
		  }
	      if(result.data && result.data.length>9){
	      	loadingType.value = 0
	      }else{
	      	loadingType.value = 2
	      }
	    } catch (err) {
	      loadingType.value = 2
	    }
	}
	function navigateTo(url) {
		uni.navigateTo({
			url,
		});
	}
</script>

<style>
.hd{background-color: #ff992a;height:90rpx;padding-bottom:10rpx;width:100%;position: fixed;left: 0;top: 0;z-index: 1010;}
.hd .cat{
    width: 60rpx;height: 60rpx;color: #fff;padding-left: 6rpx;
}
.hd .login{
    width:70rpx;height: 90rpx;color:#fff;padding-left: 20rpx;
}
.hd .search{
    height: 60rpx;border-radius: 30rpx;background-color: #fff;
}
.floor{background-color: #f6f6f6;position: relative;margin-bottom: 30rpx;overflow: hidden;}
.slider-bg{background-image: linear-gradient(0deg,#ffad55,#ff992a 50%);position: absolute;top: 0;left: -25%;height: 200rpx;width: 150%;border-bottom-left-radius: 100%;border-bottom-right-radius: 100%}
.red-gb1{background: #ff992a;}
.d-bg-color{background-color:#EDEDED;}
</style>
